<template>
  <div class="quest-container">
    <el-form :model="searchForm" inline>
      <el-form-item label="订单号">
        <el-input
          v-model="searchForm.order_sn"
          placeholder="输入订单号"
          class="w200px"
        >
        </el-input>
      </el-form-item>
      <el-space>
        <el-button type="primary" @click="searchHandle">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-space>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="order_sn" label="订单号" />
      <el-table-column prop="amount" label="金额(元)" width="120" />
      <el-table-column prop="num" label="数量" width="120" />
      <el-table-column prop="nick_name" label="购买人" width="240">
        <template #default="scope">
          <el-space>
            <img :src="scope.row.shop_info?.avatar" class="cover" />
            <div class="text-over-1">{{ scope.row.shop_info?.nick_name }}</div>
          </el-space>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="购买时间" width="180" />
    </el-table>
    <div class="mt-24">
      <Pagination
        class="text-center"
        :page="pageForm.page"
        :limit="pageForm.limit"
        :total="tableTotal"
        @pagination="pageHandle"
      />
    </div>
  </div>
</template>

<script setup>
import Pagination from '@/components/Pagination';
import { ref, onMounted } from 'vue';
import { apiOrderList } from '@/api/user';
const tableData = ref([]);
const tableTotal = ref(0);
/**
 * 表格勾选复选框
 */
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val);
};
/**
 * 分页
 */
const pageForm = ref({
  page: 1,
  limit: 10
});
const pageHandle = (val) => {
  pageForm.value = val;
  getData();
};
// 搜索
const searchForm = ref({
  order_sn: ''
});
const resetSearch = () => {
  searchForm.value = {
    order_sn: ''
  };
  searchHandle();
};
const searchHandle = () => {
  pageForm.value.page = 1;
  getData();
};
// 获取表格数据
const getData = async () => {
  const { data, total } = await apiOrderList({
    ...pageForm.value,
    ...searchForm.value
  });
  tableData.value = data;
  tableTotal.value = total;
};
onMounted(() => {
  getData();
});
</script>

<style scoped>
.quest-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  padding: 16px;
  box-sizing: border-box;
}
.cover {
  height: 36px;
  width: 36px;
  border-radius: 6px;
}
.w200px {
  width: 200px;
}
</style>
